<template>
    <div class="container">
        <div class="navigation">
            <img src="./images/logo.png" alt="">
            <ul>
                <li @click="toHome">首页</li>
                <li @click="toJoin">加盟介绍</li>
                <li @click="toSystem">课程体系</li>
                <li @click="toShow">课程展示</li>
                <li>物料预览</li>
            </ul>
        </div>
        <div class="fixed">
            <div>
                <img src="./images/weixin.png" alt="">
                <div>微信官方号</div>
            </div>
            <div>
                <img src="./images/douyin.png" alt="">
                <div>抖音官方号</div>
            </div>
            <div>
                <img src="./images/xhs.png" alt="">
                <div>小红书官方号</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Header',
    methods: {
        toHome(){
            this.$router.push('/home');
        },
        toJoin(){
            this.$router.push('/join');
        },
        toSystem(){
            this.$router.push('/system');
        },
        toShow(){
            this.$router.push('/show');
        }
    },
}
</script>

<style scoped>
.container {
    width: 100%;
    height: 100vh;
}

.navigation{
    width: 100%;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}

.navigation img{
    width: 15%;
    height: 45%;
}

ul{
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    line-height: 10vh;
    font-size: 25px;
}

ul li:hover{
    color: orange;
    cursor: pointer;
}

.fixed{
    width: 80px;
    height: 240px;
    background-color: white;
    position: fixed;
    left: 50px;
    top: 40vh;
    border-radius: 15px;
}

.fixed>div{
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fixed>div:last-child{
    border-bottom: none;
}

.fixed>div img{
    margin-bottom: 5px;
}
</style>